let quote;

document.onselectionchange = function() {
    if (getSelection().toString() &&
        getSelection().anchorNode.parentNode.closest('[data-book-page]')) {

        quote = getSelection().toString();
    }
    showQuote();
}

document.addEventListener('click', event => {
    closeQuote(event);
    addQuote(event);
    chooseQuoteColor(event);
    openQuoteInBook(event);
    removeQuote(event);
    showQuoteNote(event);
    closeQuoteNote(event);
    removeQuoteNote(event);
})


function removeQuoteNote(event) {
    // Удаляем примечание
    
    if (event.target.closest('[data-remove-quote-note]')) {
        event.preventDefault();
        deleteQuoteNote(event);
    }


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function deleteQuoteNote(event) {
        const quoteId = event.target.closest('.quote-note').previousSibling
                             .querySelector('[data-show-quote-note]').dataset.showQuoteNote;

        const token = event.target.closest('form[name="delete-quote-note"]')
                        .querySelector('input[name="csrfmiddlewaretoken"]').value;

        base.sendRequestToDeleteNote(token, quoteId);

        event.target.closest('.quote-note').remove();
    }
}

function closeQuoteNote(event) {
    // Закрываем примечание цитаты

    if (event.target.closest('[data-close-quote-note]')) {
        event.target.closest('.quote-note').remove()
    }
}


function showQuoteNote(event) {
    // Показываем примечание к цитате

    if (event.target.closest('[data-show-quote-note]') &&
        event.target.closest('a[data-open-quote-in-book]').nextSibling.nodeType == 3) {
        const quoteID = event.target.closest('[data-show-quote-note]').dataset.showQuoteNote
        const noteHTML = base.getNoteHTML();
        addNoteToQuote(event, quoteID, noteHTML);
    }


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function addNoteToQuote(event, quoteID, noteHTML) {
        // Получаем информацию о примечание

        const url = document.location.href + `note/?quote_id=${quoteID}`;
        base.sendAjaxRequest(url, 'GET')
            .then(result => {
                insertNoteHTML(event, noteHTML, result);
            })
    }

    function insertNoteHTML(event, noteHTML, data) {
        // Вставляем примечание под цитату
        
        const token = data['token'];
        noteHTML.querySelector('.quote-note-text').textContent = data.note_text;
        const relatedQuote = event.target.closest('[data-open-quote-in-book]');
        relatedQuote.insertAdjacentElement('afterend', noteHTML);
        event.target.closest('a[data-open-quote-in-book=true]').nextSibling.querySelector('form')
            .insertAdjacentHTML('afterbegin', `
                <input type="hidden" name="csrfmiddlewaretoken" value="${token}">
            `)
    }
}


function removeQuote(event) {
    // Удаляем цитату

    if (event.target.closest('[data-remove-quote]')) {
        event.preventDefault();
        const quoteID = event.target.closest('[data-remove-quote]').dataset.removeQuote;
        const csrf_token = event.target.closest('form[name="remove-quote"]')
                                       .querySelector('input[name="csrfmiddlewaretoken"]').value;
        const url = document.location.href + `quote/?delete=${quoteID}/`;
        removeRelatedNote(event)
        base.sendAjaxRequest(url, 'POST', {'token': csrf_token, 'remove_quote_id': quoteID})
           .then(() => {
                // Удаляем цитату со страницы
                event.target.closest('[data-open-quote-in-book]').remove();
            })
            .then(() => {
                // Показываем пустой список цитат если удалили все
                base.showEmptyListOfQuotes()
            })
    }


    // ВЫШЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function removeRelatedNote(event) {
        // Удаляем связанно примечание
        const quoteId = event.target.closest('[data-remove-quote]').dataset.removeQuote;
        const token = event.target.closest('form[name="remove-quote"]')
            .querySelector('input[name="csrfmiddlewaretoken"]').value;

        base.sendRequestToDeleteNote(token, quoteId)
        base.removeRelatedNoteHTML(event)
    }
}

function openQuoteInBook(event) {
    // Открываем цитату в книге
    if (event.target.dataset.openQuoteInBook ||
        event.target.closest('[data-open-quote-in-book]') &&
        event.target.closest('[data-quote-action]')) {

        event.preventDefault();
        }
}

function chooseQuoteColor(event) {
    // Выбираем цвет для цитаты
    
    if (event.target.closest('[data-choose-color]')) {
        removeSelectedColors()
        event.target.dataset.chooseColor = 'true';
        event.target.classList.add('selected-quote-color');
    }

}

function removeSelectedColors() {
    // Убираем все выбранные цвета

    const selectedColors = document.querySelectorAll('.selected-quote-color');

    for (let color of selectedColors) {
        color.classList.remove('selected-quote-color');
        color.dataset.chooseColor = false;
    }
}

function getSelectedQuoteColor() {
    // Получаем выбранный цвет цитаты

    const element = document.querySelector('[data-choose-color=true]');

    if (element) {
        let rgb = getComputedStyle(element).backgroundColor;
        const [r, g, b] = rgb.match(/\d+/gi);
        const hex = rgbToHex(r, g, b)
        console.log('hex', hex)
        return String(hex).substr(1,)
    } else {
        return 'febcff'
    }

    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (+r << 16) + (+g << 8) + +b).toString(16).slice(1);
    }

}

function setTemporaryColor() {
    // Устанавливаем временный цвет

    const $text = document.querySelector('.text>p');
    const color = getSelectedQuoteColor();
    const finalText = $text.innerHTML.replace(quote, `<span style="background: #${color};">${quote}</span>`)
    $text.innerHTML = finalText;
}

function addQuote(event){
    // Добавляем цитату

    if (event.target.dataset.addQuote == 'true') {
        event.preventDefault()

        const currentPageNumber = base.getCurrentPageNumber();
        const token = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
        const textarea = document.querySelector('textarea');
        const selectedColor = getSelectedQuoteColor();
        const initial_url = document.location.href.replace(/\?.*/ig, '');
        const url = initial_url + `quote/`;

        base.sendAjaxRequest(url, 'POST', {'token': token, 'quote': quote,
                             'note': textarea.value, 'color': selectedColor,
                             'page_number': currentPageNumber});
        textarea.value = '';
        selectedQuoteColor = getSelectedQuoteColor()
        setTemporaryColor()
        closeQuote(event, close=true);
    }
}


function closeQuote(event, close=false) {
    if (event.target.classList.contains('close-quote') || close) {
        document.querySelector('.quote').style.left = '-100em';
        document.querySelector('.quote').style.top = '-100em';
        document.querySelector('.quote').style.opacity = '0';
        document.querySelector('.quote').style.trainsition = 'opacity .2s ease-in';
        document.querySelector('textarea').value = '';
    }
}

function getQuoteWindow() {
    // Получаем форму для цитаты

    return document.querySelector('.quote');
}

function isBookPage() {
    // Проверяем, является ли текущая страница страницей книги

    const regexp = RegExp(/\?page=\d+$/, 'g')
    if (regexp.exec(document.location.href)) return true;
    else return false
}

function getSelectedText() {
    // Получаем выделенный текст

    const selectedText = document.getSelection().toString();
    return selectedText;
}

function getStartOfSelection() {
    // Получаем место начала выделения

    const quoteWindow = getQuoteWindow();
    hideShowQuote(quoteWindow, false, true);

    const element = insertTemporaryElement()
    const y = element.getBoundingClientRect().y;
    const left = element.offsetLeft - (quoteWindow.clientWidth / 2);
    const top = element.offsetTop - quoteWindow.clientHeight - 10;

    element.remove();
    hideShowQuote(quoteWindow, true, false)
    return [y, left, top]


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function hideShowQuote(quoteWindow, hide=false, show=false) {
        // Скрываем/показываем цитату

        if (hide) {
            quoteWindow.style.cssText = `
                opacity: 0;
            `
            return
        } else if (show) {
            quoteWindow.style.cssText = `
                opacity: 1;
            `
            return
        }
    }

    function insertTemporaryElement() {
        // Добавляем элемент в начало выделения для последующего получения позиции

        const range = document.getSelection().getRangeAt(0);
        const element = document.createElement('span');
        element.style.cssText = `
            position: absolute;
        `
        range.insertNode(element);
        return element;
    }
}

function hideQuoteWindow(selectedText) {
    // Скрываем лишние окна для добавления цитаты

    if (!selectedText) return
    const quoteWindow = getQuoteWindow();
    quoteWindow.style.opacity = '0';
}

function showQuote(event) {

    if (!isBookPage()) return;
    if (!getSelection().anchorNode.parentNode.closest('[data-book-page]')) return;
    const selectedText = getSelectedText();
    hideQuoteWindow(selectedText);
    if (!selectedText) return;

    const [y, left, top] = getStartOfSelection();
    setPositionQuoteWindow(y, left, top);

    setTimeout(() => {
        document.querySelector('.quote').style.opacity = '1';
        document.querySelector('.quote').style.transition = 'opacity .3s ease-in';
    }, 1000)


    // ВЫШЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function setPositionQuoteWindow(y, left, top) {
        // Устанавливаем позицию для окна с цитатой

        const quote = getQuoteWindow();
        quote.style.left = left + 'px';
        quote.style.top = top + 'px';

        if (y < 180) {
            quote.style.top = top + quote.clientHeight + 40 + 'px';
        }

    }
}

const quoteWindowInner = `
    <div class="quote-create">
        <form method="post">
            {% csrf_token %}
            <button class="add-quote">
                <i class="fa-solid fa-check"></i>
                skdfjaaaa
            </button>
        </form>
    </div>
`